// 给整个页面设置背景图
html {
    background: url('../img/bg.jpg') no-repeat;
    background-size: cover;
}

// 设置公共样式
.public() {
     width: 100%;
     border: 1px solid transparent;
     //设置边框图片
     border-image-source: url('../img/border.png');
     // 分割边框
     border-image-slice: 50 38 58 127;
     // 设置边框的平铺方式
     border-image-repeat: round;
     // 设置边框宽度
     border-image-width: 2.083rem 1.583rem 2.417rem 5.292rem;
     // 保证盒子大小不变
     box-sizing: border-box;
}



// 主体盒子
.main_body {
    display: flex;
    padding: 0 0.833rem;
    background: url('../img/logo.png') no-repeat;
    background-size: contain;
    //左侧第一个盒子
    .letfBox {
        flex: 3;
        margin-top: 3.625rem;

        //第一个顶部盒子
        .left_topBox {
            height: 4.5rem;
            margin-bottom: 0.833rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .public();

            h4 {
                font-size: 0.917rem;
            }

            p {
                color: #006cff;

                span {
                    color: #6acca3;
                }
            }
        }

        //第二个盒子
        .left_topBox2 {
            height: 19.75rem;
            margin-bottom: 0.833rem;
            .public();

            //标题
            .title {
                display: flex;
                height: 2.5rem;
                line-height: 2.5rem;
                padding: 0 1.375rem;

                .line {
                    width: 0.083rem;
                    height: 0.833rem;
                    background-color: #00f2f1;
                    margin: 0.917rem 1.083rem;
                }

                a {
                    font-size: 0.667rem;
                }
                .active {
                    color: #006cff;
                }
            }

            //提示标题
            .tips_title {
                height: 1.583rem;
                line-height: 1.583rem;
                background: rgba(255,255,255,.1);
                display: flex;
                padding: 0 1.375rem;
                .itme {
                    color: #00f2f1;
                    &:nth-child(1) {
                        margin-right: 3.5rem;
                    }
                    &:nth-child(2) {
                        margin-right: 6.25rem;
                    }
                }
            }
            //列表内容区域
            .content {
                padding: 0 1.375rem;
                overflow: hidden;
                height: 15.167rem;
                li {
                    height: 1.5rem;
                    line-height: 1.5rem;
                    span {
                        color: #5697e5;
                    }
                    span:nth-child(2) {
                        margin: 0 3.583rem 0 2.917rem;
                    }
                }

            }
        }

        //第三个盒子
        .left_botBOx {
            height: 14rem;
            margin-bottom: 0.833rem;
            .public();
            //标题
            .title {
                height: 2.833rem;
                line-height: 2.833rem;
                padding-left: 1.375rem;
                font-size: 0.833rem;
            }
            //内容
            .content {
                padding: 0 1.375rem;
                display: flex;
                // 饼状图盒子
                .left_pieBox {
                    flex: 1;
                    height: 9.917rem;
                }
                // 右侧信息展示盒子
                .right_msgShow {
                    width: 6.917rem;
                    height: 9.917rem;
                    background: url('../img/rect.png') no-repeat;
                    background-size: cover;
                    padding: 0 1.25rem;
                    box-sizing: border-box;

                    .item {
                        margin-top: 1.583rem;

                        h4 {
                            font-size: 1rem;
                        }
                        p {
                            color: #4c9bfd;
                        }
                    }
                }
            }

        }
    }

    //中间盒子
    .middleBox {
        flex: 4;
        margin-top: 4.917rem;
        margin-left: 0.833rem;
        margin-right: 0.833rem;

        //标题盒子
        .title {
            height: 2.167rem;
            line-height: 2.167rem;
            font-size: 0.833rem;
            span {
                color: #68d8fe;
            }
        }
        //地图
        .map {
            height: 21.667rem;
            background: rgba(255,255,255,.1);
        }

        //第三个底部柱状图
        .bot_boxBar {
             height: 14rem;
             margin-top: 0.833rem;
             .public();
             // 标题
             .title {
                 height: 2.833rem;
                 line-height: 2.833rem;
                 padding: 0 1.375rem;
                 font-size: 0.833rem;
             }
             // 内容
             .content {
                 display: flex;
                 padding: 0 1.375rem;
                 //左侧柱状图
                 .leftBar {
                     flex: 1;
                     height: 9.833rem;
                 }
                 //右侧信息展示
                 .right_msg {
                      width: 6.917rem;
                      height: 9.917rem;
                      background: url('../img/rect.png') no-repeat;
                      background-size: cover;
                      padding: 0 1.25rem;
                      box-sizing: border-box;

                      .item {
                          margin-top: 1.583rem;

                          h4 {
                              font-size: 1rem;
                          }

                          p {
                              color: #4c9bfd;
                          }
                      }
                 }
             }
        }
    }
    //右侧盒子
    .rightBox{
        flex: 3;
        margin-top: 3.625rem;

        // 第一个顶部盒子
        .right_top1Box {
            height: 6.083rem;
            .public();
            //标题
            .title {
                height: 2.5rem;
                line-height: 2.5rem;
                padding: 0 1.375rem;
                display: flex;
                a {
                    color: #006cff;
                }
                .active {
                    color: #fff;
                }
                .line {
                    width: 0.083rem;
                    height: 0.75rem;
                    background-color: #00f2f1;
                    margin: 0.917rem 0.667rem;
                }
            }
            // 内容区域
            .content {
                .item {
                    padding: 0 1.375rem;
                    display: flex;
                    justify-content: space-between;

                    h4 {
                        font-size: 0.917rem;
                    }
                    p {
                        color: #458fe9;
                    }
                }
            }
            
        }

        // 第二个盒子
        .right_top2Box {
            height: 10.208rem;
            margin-top: 0.833rem;
            .public();
            // 标题
            .title {
                height: 2.5rem;
                line-height: 2.5rem;
                display: flex;
                align-items: center;
                padding: 0 1.375rem;
                .line {
                    width: 0.083rem;
                    height: 0.833rem;
                    background-color: #00f2f1;
                    margin: 0.917rem 0.75rem;
                }
                a {
                    width: 1rem;
                    height: 1rem;
                    line-height: 1rem;
                    text-align: center;
                    margin-right: 0.625rem;
                }
                .active {
                    background-color: #4c9bfd;
                    color: #fff;
                }
            }
            // 内容
            .content {
                padding: 0 1.375rem;
                // 折线图盒子
                .lineBox {
                    height: 7.5rem;
                }
            }
        }

        // 第三个盒子
        .right_top3Box {
            display: flex;
            margin: 0.833rem 0;
            // 公共样式
            .public_title {
                 height: 2.833rem;
                 line-height: 2.833rem;
                 padding: 0 1.375rem;
            }
            // 左侧盒子
            .leftBox_ {
                width: 11.083rem;
                height: 9.583rem;
                margin-right: 0.833rem;
                .public();

                // 内容区域
                .content {
                    padding: 0 1.375rem;

                    .topitem {
                        display: flex;
                        margin-bottom: 0.625rem;
                        .leftItem_ {
                            width: 5.667rem;
                        }
                        h4 {
                            font-size: 1.083rem;
                        }
                        p {
                            color: #006cff;
                            span {
                                color: #006cff;
                            }
                        }
                    }
                }
            }
            .rightBox_ {
                position: relative;
                width: 11.083rem;
                height: 9.583rem;
                .public();

                // 饼状图
                .bot_pie {
                    height: 3.333rem;
                }

                // 数字展示
                .numb_show {
                     position: absolute;
                     left: 50%;
                     top: 45%;
                     transform: translateX(-50%);
                     font-size: 0.917rem;
                     font-weight: 700;
                }

                //底部盒子
                .bot_box {
                    padding: 0 1.375rem;
                    .topitem {
                        display: flex;
                        margin-bottom: 0.625rem;

                        .leftItem_ {
                            width: 5.667rem;
                        }

                        h4 {
                            font-size: 1.083rem;
                        }

                        p {
                            color: #006cff;

                            span {
                                color: #006cff;
                            }
                        }
                    }
                }
            }
        }

        // 最后一个盒子
        .right_lastBox {
            height: 11.667rem;
            .public();

            //标题
            .title {
                height: 2.5rem;
                line-height: 2.5rem;
                padding: 0 1.375rem;

                span:nth-child(2) {
                    margin-left: 3.583rem;
                    margin-right: 6.625rem;
                }

                span:nth-child(3) {
                    color: #006cff;
                }
            }

            //内容区域
            .content {
                padding: 0 1.375rem;
                display: flex;
                // 左侧第一个盒子
                .left_listBox {
                    .items {
                        height: 2.833rem;
                        line-height: 2.833rem;

                        span {
                            font-size: 1.25rem;
                        }
                    }
                }

                // 中间盒子
                .middle_listBox {
                     width: 6.583rem;
                     margin-left: 2.917rem;
                     .items {
                         height: 1.333rem;
                         line-height: 1.333rem;
                         padding: 0 0.583rem;
                         &:nth-child(1) {
                             background-color: rgba(255,255,255,.1);
                         }
                         span {
                             color: #4995f4;
                             &:nth-child(2) {
                                 margin-left: 0.417rem;
                                //  margin-right: 0.25rem;
                             }
                         }

                         &:hover {
                             background-color: rgba(255, 255, 255, .1);
                             cursor: pointer;
                         }
                     }
                }
                
                //右侧盒子
                .right_listBox {
                    height: 7.917rem;
                    width: 6.625rem;
                    background: rgba(255, 255, 255, .1);
                    padding: 0  0.583rem;
                    box-sizing: border-box;


                    .items {
                        height: 1.333rem;
                        line-height: 1.333rem;
                        span {
                            color: #52ffff;
                        }
                        span:nth-child(2) {
                            margin-left: 0.833rem;
                            margin-right: 0.417rem;
                        }
                    }
                }
            }
        }
    }
}